<template>
  <div class="dashboard-container">
    <div class="topTit">
      <el-date-picker
        v-model="value"
        size="mini"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        @change="setDate"
      />
      <div class="outData" @click="outData">导出原始数据</div>
    </div>
    <div class="setContent">
      <div class="cont">
        <el-table :data="tableData" stripe>
          <el-table-column label="姓名" prop="username" width="120" fixed align="center">
            <template scope="scope">
              <span style="color: #3345ff;">{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="workNumber" label="工号" width="120" fixed align="center" />
          <el-table-column prop="department.name" label="部门" width="120" show-overflow-tooltip fixed align="center" />
          <el-table-column prop="post" label="职位" show-overflow-tooltip fixed />
          <div v-if="total>0">
            <el-table-column v-for="(item, index) in tableData[0].signs" :key="index" :label="item.signDate" align="center" width="95">
              <template scope="scope">
                <span v-if="item.signCount == 0" style="color: #666">{{ item.signCount }}</span>
                <span v-if="item.signCount > 0" style="color: #3345ff; cursor: pointer;" @click="showInfo(scope.row, item)">{{ item.signCount }}</span>
              </template>
            </el-table-column>
          </div>
        </el-table>
        <div v-if="total > 10" class="pageList">
          <el-pagination
            layout="prev, pager, next"
            :total="total"
            @current-change="handleSizeChange"
          />
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" center width="40%" style="border-radius: 10px;" :before-close="handleClose">
      <div v-if="userInfo.user" class="userInfo">
        <div class="header">
          <div class="headIcon">
            <img v-if="userInfo.user.icon" :src="userInfo.user.icon" alt="" width="30">
            <div v-if="!userInfo.user.icon" class="icon">图</div>
          </div>
          <div>
            <div>{{ userInfo.user.username }}</div>
            <div>{{ userInfo.user.department.name }}</div>
          </div>
        </div>
        <div class="content">
          <div class="itemBox">
            <div v-for="it in userInfo.signs" :key="it.id" class="items">
              <div><span class="tit">{{ formatDate(it.createTime) }}</span><span>{{ it.address }}</span></div>
              <div><span class="tit">签到备注: </span><span>{{ it.remarks }}</span></div>
              <div class="price">
                <span class="tit">签到图片: </span>
                <template v-if="it.pictures.length">
                  <img v-for="item in it.pictures" :key="item.id" :src="item.picture" alt="" width="70" height="70">
                </template>
                <span v-if="!it.pictures.length">暂无！</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'Dashboard',
  filters: {
    dateFormat(val) {
      return val
    }
  },
  data() {
    return {
      value: '',
      title: '',
      total: 0,
      dialogVisible: false,
      userInfo: {},
      params: {
        startTime: '',
        endTime: '',
        page: 1,
        pageSize: 10
      },
      loading: true,
      tableData: [{}]
    }
  },
  created() {
    this.setValue()
    // this.getAttendanceList()
  },
  methods: {
    getAttendanceList() {
      this.$store.dispatch('register/getSignListAct', this.params).then((res) => {
        this.tableData = res.rows
        this.params.page = res.page
        this.total = res.total
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    setDate(value) {
      this.params.startTime = moment(value[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      this.params.endTime = moment(value[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      this.getAttendanceList()
    },
    outData() {
      const startTime = moment(this.value[0], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      const endTime = moment(this.value[1], 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD')
      this.$store.dispatch('register/signExoprtAct', { startTime, endTime }).then((res) => {
        if (res.success) {
          const url = res.data
          const a = document.createElement('a')
          a.href = url
          a.click()
        } else {
          this.$message.error('出错了！' + res.message)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    setValue() {
      const date = []
      date.push(moment().subtract('days', 7))
      date.push(moment().subtract('days', 1))
      this.value = date
      this.setDate(date)
    },
    showInfo(row, attend) {
      this.title = moment(attend.signDate, 'YYYY-MM-DD').format('YYYY年MM月DD日')
      this.$store.dispatch('register/getSignDetAct', { userId: row.id, signDate: moment(attend.signDate, 'YYYY-MM-DD').format('YYYY-MM-DD') })
        .then(res => {
          this.userInfo = res
          this.dialogVisible = true
        })
    },
    handleClose(done) {
      done()
    },
    handleSizeChange(val) {
      this.params = { page: val, ...this.params }
      this.getAttendanceList()
    },
    formatDate(val) {
      return moment(new Date(Number(val))).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>
<style lang="scss">
  .setContent {
    .cont {
      .el-table thead th, .el-table thead tr {
        background: #edeffd;
      }
    }

    .pageList {
      text-align: right;
      padding: 10px 0;

      .el-pager li {
        margin: 0 5px;
        min-width: 28px;
        width: 28px;
      }
      .active {
        background: #3345ff;
        border-radius: 100%;
        color: #fff;
      }
    }
  }

  .el-dialog__header {
    border-bottom: solid 1px #eaeaea;
  }
</style>
<style lang="scss" scoped>
  .dashboard {
    &-container {
      padding: 0 15px;

      .topTit {
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .outData {
          color: #3345ff;
          cursor: pointer;
          font-size: 14px;
        }
      }

      .setContent {
        background: #fff;
        min-height: 510px;

        .title {
          padding: 0 15px;
          line-height: 40px;
          background: #eceffc;

        }

        .cont {
        }
      }

      .userInfo {
        .header {
          background: rgba(40, 97, 254, 0.14);
          display: flex;
          padding: 10px 20px;
          line-height: 20px;
          border-radius: 8px;

          .headIcon {
            width: 40px;
            height: 40px;
            margin-right: 10px;
            img{
              width: 40px;
              height: 40px;
              line-height: 40px;
              border-radius: 100%;
            }
          }
          .icon{
            font-size: 20px;
            text-align: center;
            line-height: 40px;
            width: 40px;
            height: 40px;
            color: #fff;
            background: #3345ff;
            border-radius: 100%;
          }
        }

        .content {
          line-height: 35px;
          margin-top: 10px;
          .itemBox{
            max-height: 240px;
            overflow: scroll;
          }
          .items{
            border-bottom: solid 1px #ccc;
            padding: 15px 0;
            .tit{
              margin-right: 10px;
            }
            .price{
              display: flex;
              img{
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
</style>
